<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/main.css">
	<link rel="stylesheet" href="/css/doc.min.css">
	<link rel="stylesheet" href="/ztree/zTreeStyle.css">
	<style>
	.tree li {
        list-style-type: none;
		cursor:pointer;
	}
	</style>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
           <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 菜单维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li style="padding-top:8px;">
				<div class="btn-group">
				  <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
					<i class="glyphicon glyphicon-user"></i> 张三 <span class="caret"></span>
				  </button>
					  <ul class="dropdown-menu" role="menu">
						<li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
						<li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
						<li class="divider"></li>
						<li><a href="index.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
					  </ul>
			    </div>
			</li>
            <li style="margin-left:10px;padding-top:8px;">
				<button type="button" class="btn btn-default btn-danger">
				  <span class="glyphicon glyphicon-question-sign"></span> 帮助
				</button>
			</li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
			<div class="tree">
				<ul style="padding-left:0px;" class="list-group">
					<li class="list-group-item tree-closed" >
						<a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
					</li>
					<li class="list-group-item">
						<span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span> 
						<ul style="margin-top:10px;">
							<li style="height:30px;">
								<a href="user.html"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
							</li>
							<li style="height:30px;">
								<a href="role.html"><i class="glyphicon glyphicon-king"></i> 角色维护</a>
							</li>
							<li style="height:30px;">
								<a href="permission.html" style="color:red;"><i class="glyphicon glyphicon-lock"></i> 菜单维护</a> 
							</li>
						</ul>
					</li>
					<li class="list-group-item tree-closed">
						<span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span> 
						<ul style="margin-top:10px;display:none;">
							<li style="height:30px;">
								<a href="auth_cert.html"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>
							</li>
							<li style="height:30px;">
								<a href="auth_adv.html"><i class="glyphicon glyphicon-check"></i> 广告审核</a>
							</li>
							<li style="height:30px;">
								<a href="auth_project.html"><i class="glyphicon glyphicon-check"></i> 项目审核</a>
							</li>
						</ul>
					</li>
					<li class="list-group-item tree-closed">
						<span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span> 
						<ul style="margin-top:10px;display:none;">
							<li style="height:30px;">
								<a href="cert.html"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>
							</li>
							<li style="height:30px;">
								<a href="type.html"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>
							</li>
							<li style="height:30px;">
								<a href="process.html"><i class="glyphicon glyphicon-random"></i> 流程管理</a>
							</li>
							<li style="height:30px;">
								<a href="advertisement.html"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>
							</li>
							<li style="height:30px;">
								<a href="message.html"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>
							</li>
							<li style="height:30px;">
								<a href="project_type.html"><i class="glyphicon glyphicon-list"></i> 项目分类</a>
							</li>
							<li style="height:30px;">
								<a href="tag.html"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>
							</li>
						</ul>
					</li>
					<li class="list-group-item tree-closed" >
						<a href="param.html"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>
					</li>
				</ul>
			</div>
        </div>





        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<section id="mainContentId" class="content container-fluid">


			<div class="panel panel-default">
              <div class="panel-heading">
				  <i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
				  <div style="float:right;cursor:pointer;">
<!--					  <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal">-->
					  <i class="glyphicon glyphicon-question-sign">

					  </i>
				  </div>
			  </div>




			  <div class="panel-body">
				  <div class="input-group-btn">

					  <button type="button" class="btn btn-success btn-delete" style="float:right">删除</button>
					  <button type="button" class="btn btn-default btn-add" style="float:right">添加</button>
					  <button type="button" class="btn btn-default btn-update" style="float:right">修改</button>
				  </div>
<!--                  <ul id="treeDemo" class="ztree"></ul>-->
				  <table id="menuTable" class="table table-hover">
					  <thead>
					  <tr>
						  <th data-field="selectItem" data-checkbox="true"></th>
					  </tr>
					  </thead>
					  <tbody>

					  </tbody>
				  </table>
			  </div>

			</div>

			</section>
        </div>
      </div>
    </div>
<!--	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">-->
<!--	  <div class="modal-dialog">-->
<!--		<div class="modal-content">-->
<!--		  <div class="modal-header">-->
<!--			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>-->
<!--			<h4 class="modal-title" id="myModalLabel">帮助</h4>-->
<!--		  </div>-->
<!--		  <div class="modal-body">-->
<!--			<div class="bs-callout bs-callout-info">-->
<!--				<h4>没有默认类</h4>-->
<!--				<p>警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。</p>-->
<!--			  </div>-->
<!--			<div class="bs-callout bs-callout-info">-->
<!--				<h4>没有默认类</h4>-->
<!--				<p>警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。</p>-->
<!--			  </div>-->
<!--		  </div>-->
		  <!--
		  <div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			<button type="button" class="btn btn-primary">Save changes</button>
		  </div>
		  -->
		</div>
	  </div>
	</div>
    <script src="/jquery/jquery-2.1.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
	<script src="/script/docs.min.js"></script>
<!--	<script src="/ztree/jquery.ztree.all-3.5.min.js"></script>-->
	<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
	<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.min.js"></script>
	<script type="text/javascript" src="bower_components/treegrid/tree.table.js"></script>

	<script type="text/javascript">
		/**
		 * 初始化表格的列
		 */
		var columns = [
			{
				field : 'selectItem',
				radio : true
			},
			{
				title : '菜单ID',
				field : 'id',
				align : 'center',
				valign : 'middle',
				width : '80px'
			},
			{
				title : '菜单名称',
				field : 'name',
				align : 'center',
				valign : 'middle',
				width : '130px'
			},
			{
				title : '上级菜单',
				field : 'parentName',
				align : 'center',
				valign : 'middle',
				sortable : true,
				width : '100px'
			},
			// {
			// 	title : '类型',
			// 	field : 'type',
			// 	align : 'center',
			// 	valign : 'middle',
			// 	width : '70px',
			// 	formatter : function(item, index) {
			// 		if (item.type == 1) {
			// 			return '<span class="label label-success">菜单</span>';
			// 		}
			// 		if (item.type == 2) {
			// 			return '<span class="label label-warning">按钮</span>';
			// 		}
			// 	}
			// },
			// {
			// 	title : '排序号',
			// 	field : 'sort',
			// 	align : 'center',
			// 	valign : 'middle',
			// 	sortable : true,
			// 	width : '70px'
			// },
			{
				title : '菜单URL',
				field : 'url',
				align : 'center',
				valign : 'middle',

				width : '160px'
			},
			{
				title : '授权标识',//要显示的标题名称
				field : 'permission',//json串中的key
				align : 'center',//水平居中
				valign : 'middle',//垂直居中
				sortable : false //是否排序
			} ];//格式来自官方demos -->treeGrid(jquery扩展的一个网格树插件)

            $(function () {
			    // $(".list-group-item").click(function(){
				//     if ( $(this).find("ul") ) {
				// 		$(this).toggleClass("tree-closed");
				// 		if ( $(this).hasClass("tree-closed") ) {
				// 			$("ul", this).hide("fast");
				// 		} else {
				// 			$("ul", this).show("fast");
				// 		}
				// 	}
				doGetObjects();
				$(".input-group-btn")
						.on("click",".btn-delete",doDeleteObject)
						.on("click",".btn-add,.btn-update",doLoadEditUI);
				});

		function doLoadEditUI(){
			var title;
			//基于点击对象的class属性值,修改标题
			if($(this).hasClass("btn-add")){
				title="添加菜单";
			}else{
				title="修改菜单";
				var item=doGetCheckedItem();
				if(!item){
					alert("请先选择");
					return;
				}
				// console.log(item);
				$("#mainContentId")
						.data("rowData",item);

			}
			//异步加载编辑页面
			var url="menu_edit";
			$("#mainContentId").load(url,function(){
				$(".box-title").html(title);
			})
		}

		function doGetCheckedItem(){
			return $("tbody input[type='radio']:checked")
					.parents("tr").data("rowData");
		}

		function doGetCheckedId(){
			//方法1:
			//var radio=$("tbody input[type='radio']:checked");
			//if(radio)return radio.val();
			//方法2:
			//1.获取选中的记录
			var selections=$("#menuTable")
					//bootstrapTreeTable是treeGrid插件内部定义的jquery扩展函数
					//getSelections为扩展函数内部要调用的一个方法
					.bootstrapTreeTable("getSelections");
			//2.对记录进行判定
			if(selections.length==1)
				return selections[0].id;
		}



		function doDeleteObject(){
			//1.获取选中记录的id值
			var id=doGetCheckedId();
			// console.log("id="+id);
			if(!id){
				alert("请先选中");
				return;
			}
			//2.给出提示是否确认删除
			if(!confirm("确认删除吗"))return;
			//3.发送异步请求执行删除操作
			//3.1定义请求参数
			var params={"id":id};
			//3.2定义请求url
			var url="menu/doDeleteObject";
			//3.3发送异步请求
			$.post(url,params,function(result){
				if(result.state==1){
					alert(result.message);
					$("tbody input[type='radio']:checked")
							.parents("tr").remove();
				}else{
					alert(result.message);
				}
			})
		}

		function doGetObjects(){
			//移除mainContentId位置的数据
			// $("#mainContentId").removeData();
			var treeTable=new TreeTable(
					"menuTable",//tableId
					"menu/doFindObjects",//url
					columns);//表中列的配置
			//treeTable.setExpandColumn(2);
			//做表格初始化
			treeTable.init();	//发起ajax请求(借助ajax函数)

		}
			// 	var setting = {
			// 		view: {
			// 			selectedMulti: false,
			// 			addDiyDom: function(treeId, treeNode){
			// 				var icoObj = $("#" + treeNode.tId + "_ico"); // tId = permissionTree_1, $("#permissionTree_1_ico")
			// 				if ( treeNode.icon ) {
			// 					icoObj.removeClass("button ico_docu ico_open").addClass("fa fa-fw " + treeNode.icon).css("background","");
			// 				}
			// 			},
			// 			addHoverDom: function(treeId, treeNode){
			// 				var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
			// 				aObj.attr("href", "javascript:;");
			// 				if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return;
			// 				var s = '<span id="btnGroup'+treeNode.tId+'">';
			// 				if ( treeNode.level == 0 ) {
			// 					s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
			// 				} else if ( treeNode.level == 1 ) {
			// 					s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  href="#" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
			// 					if (treeNode.children.length == 0) {
			// 						s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
			// 					}
			// 					s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
			// 				} else if ( treeNode.level == 2 ) {
			// 					s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  href="#" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
			// 					s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
			// 				}
			//
			// 				s += '</span>';
			// 				aObj.after(s);
			// 			},
			// 			removeHoverDom: function(treeId, treeNode){
			// 				$("#btnGroup"+treeNode.tId).remove();
			// 			}
			// 		},
			// 		async: {
			// 			enable: true,
			// 			url:"tree.txt",
			// 			autoParam:["id", "name=n", "level=lv"]
			// 		},
			// 		callback: {
			// 			onClick : function(event, treeId, json) {
			//
			// 			}
			// 		}
			// 	};
			// 	//$.fn.zTree.init($("#treeDemo"), setting); //异步访问数据
			//
			// 	var d = [{"id":1,"pid":0,"seqno":0,"name":"系统权限菜单","url":null,"icon":"fa fa-sitemap","open":true,"checked":false,"children":[{"id":2,"pid":1,"seqno":0,"name":"控制面板","url":"dashboard.htm","icon":"fa fa-desktop","open":true,"checked":false,"children":[]},{"id":6,"pid":1,"seqno":1,"name":"消息管理","url":"message/index.htm","icon":"fa fa-weixin","open":true,"checked":false,"children":[]},{"id":7,"pid":1,"seqno":1,"name":"权限管理","url":"","icon":"fa fa-cogs","open":true,"checked":false,"children":[{"id":8,"pid":7,"seqno":1,"name":"用户管理","url":"user/index.htm","icon":"fa fa-user","open":true,"checked":false,"children":[]},{"id":9,"pid":7,"seqno":1,"name":"角色管理","url":"role/index.htm","icon":"fa fa-graduation-cap","open":true,"checked":false,"children":[]},{"id":10,"pid":7,"seqno":1,"name":"许可管理","url":"permission/index.htm","icon":"fa fa-check-square-o","open":true,"checked":false,"children":[]}]},{"id":11,"pid":1,"seqno":1,"name":"资质管理","url":"","icon":"fa fa-certificate","open":true,"checked":false,"children":[{"id":12,"pid":11,"seqno":1,"name":"分类管理","url":"cert/type.htm","icon":"fa fa-th-list","open":true,"checked":false,"children":[]},{"id":13,"pid":11,"seqno":1,"name":"资质管理","url":"cert/index.htm","icon":"fa fa-certificate","open":true,"checked":false,"children":[]}]},{"id":15,"pid":1,"seqno":1,"name":"流程管理","url":"process/index.htm","icon":"fa fa-random","open":true,"checked":false,"children":[]},{"id":16,"pid":1,"seqno":1,"name":"审核管理","url":"","icon":"fa fa-check-square","open":true,"checked":false,"children":[{"id":17,"pid":16,"seqno":1,"name":"实名认证人工审核","url":"process/cert.htm","icon":"fa fa-check-circle-o","open":true,"checked":false,"children":[]}]}]}];
			// 	$.fn.zTree.init($("#treeDemo"), setting, d);
            // });
        </script>
  </body>
</html>
